<template>
    <div id="sys-log-index">
        <!-- <el-card> -->
        <el-container>
            <el-main>
                <div>
                    <el-form :inline="true" size="small" :model="searchForm" class="demo-form-inline"
                             @keyup.enter.native="search()" @submit.native.prevent>
                        <el-form-item>
                            <el-input placeholder="请输入表名" v-model="searchForm.tableName"/>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="searchForm.dsName" filterable placeholder="请选择数据源">
                                <el-option
                                        v-for="item in dsCfgs"
                                        :key="item.id"
                                        :label="item.dsName"
                                        :value="item.dsName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
                            <el-button class="margin-left-10" icon="el-icon-delete" @click="reset">清空</el-button>
                        </el-form-item>
                        <el-tooltip effect="dark" content="刷新" placement="top-start">
                            <el-button size="small" class="float-right" icon="el-icon-refresh" @click="init"
                                       circle></el-button>
                        </el-tooltip>
                    </el-form>
                </div>
                <el-table
                        border
                        stripe
                        :data="fileList"
                        ref="sysDictTable"
                        size="mini"
                        style="width: 100%">
                    <el-table-column label="序号" width="50" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.$index+(pageInfo.current - 1) * pageInfo.pageSize + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="表名称" prop="tableName" align="center" show-overflow-tooltip/>
                    <el-table-column label="表注释" prop="tableComment" align="center" show-overflow-tooltip/>
                   <!-- <el-table-column label="数据库类型" prop="dbType" align="center" show-overflow-tooltip/>
                    <el-table-column label="表编码" prop="fileType" align="center" show-overflow-tooltip/>
                    <el-table-column label="索引" prop="filePath" align="center" show-overflow-tooltip/>-->
                    <el-table-column label="创建时间" prop="createTime" align="center" show-overflow-tooltip/>
                    <el-table-column label="操作" fixed="right" width="80px" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" icon="el-icon-s-tools"
                                       @click="genCode(scope.row)">生成
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row type="flex" justify="end">
                    <el-pagination
                            :style="{float: 'right', padding: '20px'}"
                            class="pageBar"
                            background
                            @size-change="genCodeSizeChange"
                            @current-change="genCodeCurrentChange"
                            :current-page="pageInfo.current"
                            :page-sizes="[5, 10, 20, 30]"
                            :page-size="pageInfo.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageInfo.total">
                    </el-pagination>
                </el-row>
            </el-main>
        </el-container>
        <generate-form ref="generateForm"></generate-form>
        <new-generate-form ref="newGenerateForm"></new-generate-form>
    </div>
</template>

<script>
    import sysGenCodeApi from "./api/genCodeIndex.service";
    import generateForm from "./generateForm"
    import newGenerateForm from "./newGenerateForm"
    export default {
        components: {
          generateForm,
          newGenerateForm
        },
        data() {
            return {
                dialogFile: false,
                fileList: [],
                searchForm: {
                    dsName: '',
                    tableName: ""
                },
                dsCfgs: [{
                    key: "",
                    value: '全部'
                }, {
                    key: 1,
                    value: 'tpf'
                }, {
                    key: 2,
                    value: 'tpf_config'
                }, {
                    key: 3,
                    value: 'test'
                }],
                pageInfo: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                }
            };
        },
        created() {
            this.getDSName();
            this.init()
        },

        methods: {
            genCode(row) {
                this.$refs.newGenerateForm.show(row.tableName,this.searchForm.dsName);
            },
            search() {
                this.init()
            },
            reset() {
                this.searchForm.dsName = '';
                this.searchForm.tableName = '';
                this.init()
            },
            formatDbType: function (row) {
                return row.dbType === 1 ? 'MySql' : row.dbType === 2 ? '达梦数据库' : '未知'
            },
            fileDbType: function (row) {
                return row.fileType === 1 ? '全部' : row.fileType === 2 ? '数据库' : '未知'
            },

            /**
             * 初始化数据源列表
             * @author wangwuhui
             * @date 2020-07-21 11:01:35
             * */
            init() {
                let _this = this;
                let params = Object.assign({
                    current: this.pageInfo.current,
                    size: this.pageInfo.pageSize
                }, this.searchForm);

                sysGenCodeApi.getTbsPage(params).then(res => {
                    _this.fileList = res.data.records
                    _this.pageInfo.total = res.data.total;
                });
            },

            /**
             * 获取数据源列表
             * @author wangwuhui
             * @date 2020-07-21 11:01:35
             */
            getDSName() {
                sysGenCodeApi.getDSName().then(res => {
                    this.dsCfgs = res.data;
                })
            },

            /**
             * 代码生成页码变化
             * @author wangwuhui
             * @date 2020-07-21 11:01:35
             */
            genCodeSizeChange(val) {
                this.pageInfo.size = val;
                this.search();
            },

            /**
             * 代码生成当前页
             * @author wangwuhui
             * @date 2020-07-21 11:01:35
             */
            genCodeCurrentChange(val) {
                this.pageInfo.current = val;
                this.search();
            },

        }
    };
</script>

<style scoped>
    .add-button-box {
        margin-bottom: 10px;
    }

    .over-flow-hidden {
        overflow: hidden;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }
</style>
